<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>UNITE | Video conferencing App</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/assets/images/favicon.svg"
    />
    <!-- Place favicon.ico in the root directory -->

    <!-- ========================= CSS here ========================= -->
    <link rel="stylesheet" href="/assets/css/bootstrap-5.0.0-beta2.min.css" />
    <link rel="stylesheet" href="/assets/css/LineIcons.2.0.css" />
    <link rel="stylesheet" href="/assets/css/tiny-slider.css" />
    <link rel="stylesheet" href="/assets/css/animate.css" />
    <link rel="stylesheet" href="/assets/css/main.css" />
  </head>
  <body>
    <!--[if lte IE 9]>
      <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="https://browsehappy.com/">upgrade your browser</a> to improve
        your experience and security.
      </p>
    <![endif]-->

    <!-- ========================= preloader start ========================= -->
    <div class="preloader">
      <div class="loader">
        <div class="spinner">
          <div class="spinner-container">
            <div class="spinner-rotator">
              <div class="spinner-left">
                <div class="spinner-circle"></div>
              </div>
              <div class="spinner-right">
                <div class="spinner-circle"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- preloader end -->

    <!-- ========================= header start ========================= -->
    <header class="header">
      <div class="navbar-area">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg-12">
              <nav class="navbar navbar-expand-lg">
                <a class="navbar-brand" href="index.html">
                  <img src="/assets/images/logo/logo.svg" alt="Logo" />
                </a>
                <button
                  class="navbar-toggler"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#navbarSupportedContent"
                  aria-controls="navbarSupportedContent"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <span class="toggler-icon"></span>
                  <span class="toggler-icon"></span>
                  <span class="toggler-icon"></span>
                </button>

                <div
                  class="collapse navbar-collapse sub-menu-bar"
                  id="navbarSupportedContent"
                >
                  <div class="ms-auto">
                    <ul id="nav" class="navbar-nav ms-auto">
                      <li class="nav-item">
                        <a class="page-scroll active" href="#home">Home</a>
                      </li>
                      <li class="nav-item">
                        <a class="page-scroll" href="#features">Features</a>
                      </li>
                      <li class="nav-item">
                        <a class="page-scroll" href="#service">Services</a>
                      </li>
                      <li class="nav-item">
                        <a class="" href="/timeline">Timeline</a>
                      </li>
                      <li class="nav-item">
                        <a class="page-scroll" href="#footer">Contact</a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="header-btn">
                  <button id="login-btn" class="main-btn btn-hover">
                    Loading...
                  </button>
                </div>
                <!-- navbar collapse -->
              </nav>
              <!-- navbar -->
            </div>
          </div>
          <!-- row -->
        </div>
        <!-- container -->
      </div>
      <!-- navbar area -->
    </header>
    <!-- ========================= header end ========================= -->

    <!-- ========================= hero-section start ========================= -->
    <section id="home" class="hero-section">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xxl-5 col-xl-6 col-lg-6 col-md-10">
            <div class="hero-content">
              <h1>Video conferencing solutions with <span>Unite</span></h1>
              <p>using peer-to-peer connections.</p>

              <a class="main-btn btn-hover">Demo</a>
            </div>
          </div>
          <div class="col-xxl-6 col-xl-6 col-lg-6 offset-xxl-1">
            <div class="hero-image text-center text-lg-start">
              <img src="/assets/images/hero/hero-img-1.svg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========================= hero-section end ========================= -->

    <!-- ========================= feature-section start ========================= -->
    <section id="features" class="feature-section">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xxl-6 col-xl-7 col-lg-8 col-md-11">
            <div class="section-title text-center mb-60">
              <h2>
                Modern design <br class="d-block" />
                with Essential Features
              </h2>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="single-feature">
              <div class="feature-icon color-1">
                <i class="lni lni-display"></i>
              </div>
              <div class="feature-content">
                <h4>One-on-One meetings</h4>
                <p>
                  Connect with your loved ones with Unite. Peer-to-peer
                  connection between two users.
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="single-feature">
              <div class="feature-icon color-2">
                <i class="lni lni-customer"></i>
              </div>
              <div class="feature-content">
                <h4>Active Customer Feedback</h4>
                <p>
                  Get immediate feedback from customers with
                  <a href="#footer">Feeback forms</a>, supporting the concept of
                  Agile.
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="single-feature">
              <div class="feature-icon color-3">
                <i class="lni lni-users"></i>
              </div>
              <div class="feature-content">
                <h4>Multiple Room Connections with Screen sharing options</h4>
                <p>
                  Join and connect with as many friends that you wish to
                  connect!
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="single-feature">
              <div class="feature-icon color-2">
                <i class="lni lni-google"></i>
              </div>
              <div class="feature-content">
                <h4>Google Authentication</h4>
                <p>
                  Sign in with Google and connect with your loved ones, just by
                  one click!
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="single-feature">
              <div class="feature-icon color-3">
                <i class="lni lni-bubble"></i>
              </div>
              <div class="feature-content">
                <h4>Persistent Text chat</h4>
                <p>
                  Join chat rooms and continue conversation before, after and
                  during the meet!
                </p>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6">
            <div class="single-feature">
              <div class="feature-icon color-1">
                <i class="lni lni-calendar"></i>
              </div>
              <div class="feature-content">
                <h4>Schedule Meetings</h4>
                <p>
                  Schedule your meetings with Google Calendar API, and invite
                  people to join!
                </p>
              </div>
            </div>
          </div>
          <div
            class="col-lg-4 col-md-6"
            style="display: block; margin-left: auto; margin-right: auto"
          >
            <div class="single-feature">
              <div class="feature-icon color-2">
                <i class="lni lni-rocket"></i>
              </div>
              <div class="feature-content">
                <h4>AI Bot</h4>
                <p>Keep your health in check with posture bot!</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========================= feature-section end ========================= -->

    <!-- ========================= feature-section-1 start ========================= -->
    <section id="feature-1" class="feature-section-1">
      <div class="shape-image">
        <img src="/assets/images/feature/feature-img-1.svg" alt="" />
      </div>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 order-last order-lg-first">
            <div class="feature-image text-center text-lg-start">
              <img src="/assets/images/feature/feature-img-1.svg" alt="" />
            </div>
          </div>
          <div class="col-lg-6 col-xxl-5 col-md-10 offset-xxl-1">
            <div class="feature-content-wrapper">
              <div class="section-title">
                <h2 class="mb-20">Witness my journey through this timeline!</h2>
                <p class="mb-30">
                  Different challenges that I faced all through these 4 weeks,
                  how I overcame them and what I learnt from those mistakes.
                </p>
                <a href="/timeline" class="main-btn btn-hover border-btn"
                  >My timeline</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========================= feature-section-1 end ========================= -->

    <!-- ========================= service-section start ========================= -->
    <section id="service" class="service-section img-bg pt-100 pb-100 mt-150">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xxl-5 col-xl-6 col-lg-7 col-md-10">
            <div class="section-title text-center mb-50">
              <h1>Main features</h1>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xl-3 col-md-6">
            <div class="single-service">
              <div class="icon color-1">
                <i class="lni lni-display-alt"></i>
              </div>
              <div class="content">
                <h3>Video calling</h3>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="single-service">
              <div class="icon color-2">
                <i class="lni lni-bubble"></i>
              </div>
              <div class="content">
                <h3>Persistent Text Chat</h3>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="single-service">
              <div class="icon color-3">
                <i class="lni lni-calendar"></i>
              </div>
              <div class="content">
                <h3>Schedule Meet</h3>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="single-service">
              <div class="icon color-4">
                <i class="lni lni-rocket"></i>
              </div>
              <div class="content">
                <h3>AI Bot</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ========================= service-section end ========================= -->

    <!-- ========================= footer start ========================= -->
    <footer id="footer" class="footer">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-6 col-lg-7">
            <div class="section-title">
              <h2>Contact Us</h2>
              <p>apurva.sharma866@gmail.com || +91 8319943063 || CG, India</p>
            </div>
            <div class="newsletter-form-wrapper">
              <form>
                <input type="text" id="user-query" placeholder="Write Query" />
                <br /><br /><br />
                <input
                  type="email"
                  id="user-email"
                  placeholder="Email Address"
                />
                <br /><br /><br />
                <input type="text" id="user-name" placeholder="Enter Name" />
                <button
                  class="main-btn btn-hover"
                  type="button"
                  onclick="SendFeedback()"
                >
                  Send Query
                </button>
              </form>
            </div>
          </div>
        </div>
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-8">
            <div class="footer-menu">
              <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#service">Service</a></li>
                <li><a href="timeline.html">Timeline</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-6 col-md-4">
            <div class="footer-social">
              <ul>
                <li>
                  <a href="#0"><i class="lni lni-facebook"></i></a>
                </li>
                <li>
                  <a href="#0"><i class="lni lni-linkedin"></i></a>
                </li>
                <li>
                  <a href="#0"><i class="lni lni-instagram"></i></a>
                </li>
                <li>
                  <a href="#0"><i class="lni lni-twitter"></i></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- ========================= footer end ========================= -->

    <!-- ========================= scroll-top ========================= -->
    <a href="#" class="scroll-top btn-hover">
      <i class="lni lni-chevron-up"></i>
    </a>

    <!-- ========================= JS here ========================= -->
    <script src="/assets/js/bootstrap-5.0.0-beta2.min.js"></script>
    <script src="/assets/js/tiny-slider.js"></script>
    <script src="/assets/js/wow.min.js"></script>
    <script src="/assets/js/polyfill.js"></script>
    <script src="/assets/js/main.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
    <script src="/js/firebaselogin.js"></script>
    <script src="/js/landing.js" defer></script>
  </body>
</html>
